<script lang="ts" setup>
import type { SelectProps } from 'ant-design-vue';
import { Button, InputNumber } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
  MdiPrinter,
  MdiDownload,
  MdiZoomIn,
  MdiZoomOut,
  MdiPrevious,
  MdiNext,
  LogOut,
  Expand,
  Shrink,
} from '@vben/icons';

import VuePdfEmbed from 'vue-pdf-embed';

let pdfUrl = ref(); // pdf数据
let isLoading = ref(true); // 是否正在加载
let currentPage = ref(1); // 当前页码
let scale = ref(0.4); // 缩放比例
let pageCount = ref(0); // 总页数
let wpHeight = 0; // 窗口宽度
let currentHeight = ref(0); // 当前宽度

const pdfRef = ref();
const wpRef = ref();

let scaleOptions = ref<SelectProps['options']>([
  { label: '100%', value: 1 },
  { label: '75%', value: 0.75 },
  { label: '50%', value: 0.5 },
  { label: '25%', value: 0.25 },
]);

/* 通过弹窗方式加载当前内容 */
const [Modal, modalApi] = useVbenModal({
  // 默认全屏
  fullscreen: true,
  confirmText: '打印',
  draggable: true,
  closeOnPressEscape: false,
  closeOnClickModal: false,
  fullscreenButton: false,
  closable: false,
  footer: false,
  lodaing: true,

  onOpenChange(isOpen) {
    if (isOpen) {
      pdfUrl.value = modalApi.getData()?.pdf;
    }
  },
  oncancel() {
    modalApi.close();
  },
});

const modalState = modalApi.useStore();

/*==============================函数过程===============================*/
watch(wpRef, (newValue) => {
  if (newValue) {
    wpHeight = newValue.clientWidth;
    currentHeight.value = wpHeight * scale.value;
  }
});

function handleDocumentRender() {
  modalApi.setState((prev) => {
    return { ...prev, loading: false };
  });
}
function handleDocumentLoad({ numPages }) {
  pageCount.value = numPages;
  // console.log('总页数：', pageCount.value)
}

// 缩放
function handleZoom(type: number) {
  if ((scale.value < 0.4 && type === -1) || (scale.value > 1.5 && type === 1)) return;
  scale.value += type * 0.1;
  currentHeight.value = wpHeight * scale.value;
}

// 页面切换
function handlePageChange(type: number) {
  if ((currentPage.value <= 1 && type === -1) || (currentPage.value >= pageCount.value && type === 1)) return;
  currentPage.value += type;
}

// 获取文件名
function getPDFFileName() {
  return pdfUrl.value.split('/').pop() || 'msds.pdf';
}

// 打印
function handlePrint() {
  pdfRef.value.print(300, getPDFFileName(), true);
}

// 下载功能
function handleDownload() {
  pdfRef.value.download(getPDFFileName());
}

function handleToggleFullscreen() {
  modalApi.setState((prev) => {
    return { ...prev, fullscreen: !prev.fullscreen };
  });
}

function handleCloseModal() {
  modalApi.close();
}

defineExpose(modalApi);
</script>

<template>
  <Modal class="w-[80%]" header-class="flex">
    <template #title>
      <div class="flex flex-row gap-4" style="align-items: center" ref="wpRef">
        <div class="flex-1" style="flexfont-size: larger">数据打印</div>
        <div class="flex-4 flex flex-row gap-2" style="justify-content: center">
          <Button
            class="mr-2 flex items-center justify-center"
            type="primary"
            :disabled="currentPage === 1"
            @click="handlePageChange(-1)"
          >
            <MdiPrevious class="size-4" />
            上一页
          </Button>
          <div class="mr-2 flex items-center justify-center" style="display: flex; align-items: center">
            <InputNumber v-model:value="currentPage" min="1" :max="pageCount" />
            <div class="pl-2" style="width: 30%">/ {{ pageCount }}</div>
          </div>
          <Button
            class="mr-2 flex items-center justify-center"
            type="primary"
            :disabled="currentPage === pageCount"
            @click="handlePageChange(1)"
          >
            <MdiNext class="size-4" />
            下一页
          </Button>
          <Button
            class="mr-2 flex items-center justify-center"
            type="primary"
            :disabled="scale >= 1.5"
            @click="handleZoom(1)"
          >
            <MdiZoomIn class="size-4" />
            放大
          </Button>
          <!-- <Select v-model="state.scale" :options="scaleOptions" @change="handleScaleChange"></Select> -->
          <Button
            class="mr-2 flex items-center justify-center"
            type="primary"
            :disabled="scale <= 0.4"
            @click="handleZoom(-1)"
          >
            <MdiZoomOut class="size-4" />
            缩小
          </Button>
          <Button class="mr-2 flex items-center justify-center" type="primary" @click="handleDownload">
            <MdiDownload class="size-4" />
            下载
          </Button>
          <Button class="mr-0" type="primary" @click="handlePrint">
            <MdiPrinter class="size-4" />
            打印
          </Button>
        </div>
        <div class="flex-1 flex flex-row gap-2" style="justify-content: end">
          <Button class="mr-2 flex items-center justify-center" type="primary" @click="handleToggleFullscreen">
            <Shrink v-if="modalState.fullscreen" class="size-4" />
            <Expand v-else class="size-4" />
            {{ modalState.fullscreen ? '还原' : '全屏' }}
          </Button>
          <Button class="mr-0 flex items-center justify-center" type="primary" @click="handleCloseModal">
            <LogOut class="size-4" />
            退出
          </Button>
        </div>
      </div>
    </template>
    <div class="pdf-preview">
      <div class="pdf-wrap">
        <vue-pdf-embed
          ref="pdfRef"
          :source="pdfUrl"
          :page="currentPage"
          :height="currentHeight"
          class="vue-pdf-embed"
          @rendered="handleDocumentRender"
          @loaded="handleDocumentLoad"
        />
      </div>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
Button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-preview {
  margin-top: 10px;
  padding: 0;
  height: auto;
  box-sizing: border-box;
  background-color: hsl(var(--background-deep));
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  display: flex;
  justify-content: center;
  text-align: center;
  width: fit-content;
  border: 1px solid hsl(var(--border));
  box-shadow: 2px 2px 10px 2px hsl(var(--border));
  margin: 0 auto;
  box-sizing: border-box;
}
</style>
